<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${ctx}/js/jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {		
		
		$(".pinLink").mouseover(function() { 
			$("#senderInfoPanel").show();
			}
		);
		$(".pinLink").mouseout(function() { 
			$("#senderInfoPanel").hide();
			}
		);
		$(".trackLink").click(function() {
			$("#transactionLogPanel").show();
		});
		$(".trackLink").mouseout(function() {
			$("#transactionLogPanel").hide();
		});
		
	});
</script>
<title>Insert title here</title>
</head>
<body>
	<h1>Transaction List</h1>
	<hr/>
	<form action="search.action" method="post">
	<table width="824" height="107" border="1">
	  <tr>
	    <td width="162">Pin Num:</td>
	    <td width="154">Destination state:</td>
	    <td width="57">Status:</td>
	    <td width="86">Start Date:</td>
	    <td width="60">End Date:</td>
	    <td width="144">Sander/Reciever Phone</td>
	    <td width="115">&nbsp;</td>
      </tr>
	  <tr>
	    <td><input type="text" name="pin" id="pin"></td>
	    <td><input type="text" name=receiverState id="receiverState"></td>
	    <td>
        	<s:select 
        		label="Status"
        		labelposition="top"
		       name="status"
		       headerKey="-1" headerValue="Select Status"	       
		       list="#{'0':'UNPAID', '1':'PAID', '2':'SENT', '3':'RECEIVED', '4':'CANCELLED'}"
		       multiple="false"		      
		       value="status"
			  />
        </td>
	    <td><input type="text" name="startDate" id="startDate"/></td>
	    <td><input type="text" name="endDate" id="endDate"/></td>
	    <td><input type="text" name="phone" id="phone"></td>
	    <td><input id="searchBtn" type="submit" name="button"  value="Search"></td>
      </tr>
	</table>
	</form>
	<p>&nbsp;</p>
	<table width="820" border="1">
	  <tr>
	    <td width="109">Pin Number</td>
	    <td width="149">Destination State</td>
	    <td width="128">Status</td>
	    <td width="111">Date</td>
	    <td width="165">Operation</td>
      </tr>
      <s:iterator value="transactions.data" status="dataStatus">
     	<tr class="<s:if test="#dataStatus.odd == true ">odd</s:if><s:else>even</s:else>">
         <td><a class="pinLink" href="view.action?id=${id}" title="${id}"><s:property value="pin" /></a></td>
         <td>send to <s:property value="receiverState" /></td>
         <td><s:property value="status" /></td>
         <td><s:property value="createDate" /></td>
         <td><a href="edit.action?id=${id}" >Edit</a> <div class="trackLink" title="${id}">Track</div></td>
     </tr>
 </s:iterator>

</table>
	<div id="senderInfoPanel" style="display: none">senderInfoPanel</div> 
	<div id="transactionLogPanel" style="display: none">transactionLogPanel</div> 
	<p>&nbsp;</p>
</body>
</html>